<template>
  <div id="parent">
    <div id="first">
      <a href="#"><img src="../../assets/icon/返回顶部.png" alt="返回"></a>
    </div>
    <el-divider/>
    <div id="second">
      <el-popover
        placement="top-start"
        title="分享到"
        width="350"
        trigger="hover">
        <div style="display: flex;flex-wrap: wrap;" id="share">
          <div>
            <img src="../../assets/icon/彩色/QQ.png" alt="qq">
            分享到QQ
          </div>
          <div>
            <img src="../../assets/icon/彩色/微信.png" alt="qq">
            分享到微信
          </div>
          <div>
            <img src="../../assets/icon/彩色/微博.png" alt="qq">
            分享到微博
          </div>
          <div>
            <img src="../../assets/icon/彩色/facebook.png" alt="qq">
            分享到facebook
          </div>
          <div>
            <img src="../../assets/icon/彩色/推特.png" alt="qq">
            分享到推特
          </div>
          <div>
            <img src="../../assets/icon/彩色/QQ空间.png" alt="qq">
            分享到qq空间
          </div>
        </div>
        <img slot="reference" width="100%" src="../../assets/icon/分享.png" alt="分享">
      </el-popover>

    </div>
  </div>
</template>

<style scoped>
#share div img {
  width: 25px;
}

#share div {
  display: flex;
  justify-content: left;
  vertical-align: center;
  margin: 10px 0;

  width: 50%;
  height: 30%;
  /*background-color: chartreuse;*/
}

#parent {
  position: fixed;
  z-index: 999;
  bottom: 20%;
  right: 20px;

  height: 80px;
  width: 50px;
}

#first {
  height: 50%;
  /*background-color: #816363;*/
}

img {
  height: 100%;
}
</style>

<script>
export default {
  name: "BaseReturnHome"
}
</script>


